import { broadcast_invited_list, broadcast_plan_list } from '@/services/broadcast';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message, Tabs, Tag } from 'antd';
import moment from 'moment';
import { useRef, useState } from 'react';
import StartLiveBroadcast from './components/StartLiveBroadcast';
type GithubIssueItem = {
  id: number;
  type: string;
  username: string;
  time: string;
  positional_name: string;
  start_time: string;
  end_time: string;
  status: number;
  deadline?: string;
};
const Broadcast_manage = () => {
  const actionRef = useRef<ActionType>();
  const actionRef1 = useRef<ActionType>();
  // 进入直播互动/授课直播间弹窗
  const [liveBroadcast, setLiveBroadcast] = useState(false);
  // 存储直播互动/授课直播id
  const [liveId, setLiveId] = useState(undefined);
  // 存储直播间详情
  const [broadcastinfo, setbroadcastinfo] = useState(undefined);

  // 控制直播互动/授课开始直播模态框的显示与隐藏
  const isShowLiveBroadcast = (status: boolean) => {
    setLiveBroadcast(status);
  };

  // 获取直播互动/授课列表数据(主讲人)
  const getLiveData = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
    type?: number | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: params.type,
      range: 'my',
    };
    console.log(params);
    const res = await broadcast_plan_list(request_body);
    console.log('直播互动/授课', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 获取互动/学习列表数据（受邀参加）
  const getStudyData = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
    type?: number | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: params.type,
    };
    // console.log(params);
    const res = await broadcast_invited_list(request_body);
    console.log('互动/学习', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 切换tab
  const changeTab = (key: string) => {
    if (key == '直播互动/授课') {
      actionRef.current?.reload();
    } else if (key == '互动/学习') {
      actionRef1.current?.reload();
    }
  };

  // 直播互动/授课列表字段
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      hideInSearch: true,
      align: 'center',
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      hideInTable: true,
      align: 'center',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播主题',
      dataIndex: 'name',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '主题',
      dataIndex: 'name',
      align: 'center',
      hideInTable: true,
    },
    {
      title: '主讲医生',
      hideInSearch: true,
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '医生职称',
      dataIndex: 'positional_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.start_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '计划开始时间',
      dataIndex: 'start_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '计划结束时间',
      dataIndex: 'end_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return (
          <>
            {record.status === 0 && <Tag color="red">未开始</Tag>}
            {record.status === 1 && <Tag color="green">直播中</Tag>}
          </>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: true,
      align: 'center',
      valueType: 'select',
      valueEnum: {
        0: {
          text: '未开始',
        },
        1: {
          text: '直播中',
        },
      },
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => [
        <Button
          key="editable"
          type="link"
          onClick={() => {
            setLiveId(record.id);
            setbroadcastinfo(record);
            isShowLiveBroadcast(true);
          }}
        >
          进入直播间
        </Button>,
      ],
    },
  ];

  // 互动/学习
  const columns1: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      hideInSearch: true,
      align: 'center',
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播类型',
      dataIndex: 'type',
      hideInTable: true,
      align: 'center',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '科普互动',
        },
        2: {
          text: '专业教培',
        },
      },
    },
    {
      title: '直播主题',
      dataIndex: 'name',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '主题',
      dataIndex: 'name',
      align: 'center',
      hideInTable: true,
    },
    {
      title: '主讲医生',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '医生职称',
      dataIndex: 'positional_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        return moment(record.start_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '计划开始时间',
      dataIndex: 'start_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '计划结束时间',
      dataIndex: 'end_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return (
          <>
            {record.status === 0 && <Tag color="red">未开始</Tag>}
            {record.status === 1 && <Tag color="green">直播中</Tag>}
          </>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: true,
      align: 'center',
      valueType: 'select',
      valueEnum: {
        0: {
          text: '未开始',
        },
        1: {
          text: '直播中',
        },
      },
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => [
        <Button
          key="editable"
          type="link"
          onClick={() => {
            if (record.id) {
              if (record.status == 0) {
                message.warning('直播未开始');
                return;
              }
              window.open(
                `/broadcast/broadcast_audience_index?id=${record.id}`,
                'broadcast_audience_index',
              );
            }
          }}
        >
          进入直播间
        </Button>,
      ],
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <Tabs
        defaultActiveKey="直播互动/授课"
        onChange={changeTab}
        items={[
          {
            key: '直播互动/授课',
            label: '直播互动/授课',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                request={async (params = {}) => getLiveData(params)}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  span: 6,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="直播管理表"
              />
            ),
          },
          {
            key: '互动/学习',
            label: '互动/学习',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns1}
                actionRef={actionRef1}
                request={async (params = {}) => getStudyData(params)}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 6,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="直播管理表"
              />
            ),
          },
        ]}
      />
      {liveBroadcast ? (
        <StartLiveBroadcast
          liveBroadcast={liveBroadcast}
          isShowLiveBroadcast={isShowLiveBroadcast}
          broadcastinfo={broadcastinfo}
          actionRef={actionRef}
          liveId={liveId}
        ></StartLiveBroadcast>
      ) : (
        ''
      )}
    </PageContainer>
  );
};
export default Broadcast_manage;
